<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>按钮</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">按钮颜色</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-bg-cyan">按钮</button>
                        <button class="layui-btn layui-bg-gray">按钮</button>
                        <button class="layui-btn layui-bg-orange">按钮</button>
                        <button class="layui-btn layui-bg-red">按钮</button>
                        <button class="layui-btn layui-bg-black">按钮</button>
                        <button class="layui-btn layui-bg-blue">按钮</button>
                        <button class="layui-btn layui-bg-green">按钮</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">按钮圆角</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-radius layui-bg-cyan">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-gray">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-orange">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-red">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-black">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-blue">按钮</button>
                        <button class="layui-btn layui-btn-radius layui-bg-green">按钮</button>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header">流体按钮</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-fluid layui-bg-cyan">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-gray">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-orange">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-red">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-black">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-blue">按钮</button>
                        <button class="layui-btn layui-btn-fluid layui-bg-green">按钮</button>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">按钮组</div>
                <div class="layui-card-body">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-bg-cyan">按钮</button>
                        <button class="layui-btn layui-bg-gray">按钮</button>
                        <button class="layui-btn layui-bg-orange">按钮</button>
                        <button class="layui-btn layui-bg-red">按钮</button>
                        <button class="layui-btn layui-bg-black">按钮</button>
                        <button class="layui-btn layui-bg-blue">按钮</button>
                        <button class="layui-btn layui-bg-green">按钮</button>
                    </div>
                    <br/>
                    <div class="layui-btn-group mar-top">
                        <button class="layui-btn layui-bg-cyan"><i class="vip-icon">&#xe6a7;</i></button>
                        <button class="layui-btn layui-bg-gray"><i class="vip-icon">&#xe6a8;</i></button>
                        <button class="layui-btn layui-bg-orange"><i class="vip-icon">&#xe6c5;</i></button>
                        <button class="layui-btn layui-bg-red"><i class="vip-icon">&#xe6bd;</i></button>
                        <button class="layui-btn layui-bg-black"><i class="vip-icon">&#xe762;</i></button>
                        <button class="layui-btn layui-bg-blue"><i class="vip-icon">&#xe75b;</i></button>
                        <button class="layui-btn layui-bg-green"><i class="vip-icon">&#xe777;</i></button>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">图标按钮</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-bg-cyan"><i class="vip-icon">&#xe658;</i></button>
                        <button class="layui-btn layui-bg-gray"><i class="vip-icon">&#xe659;</i></button>
                        <button class="layui-btn layui-bg-orange"><i class="vip-icon">&#xe65e;</i></button>
                        <button class="layui-btn layui-bg-red"><i class="vip-icon">&#xe664;</i></button>
                        <button class="layui-btn layui-bg-black"><i class="vip-icon">&#xe666;</i></button>
                        <button class="layui-btn layui-bg-blue"><i class="vip-icon">&#xe66c;</i></button>
                        <button class="layui-btn layui-bg-green"><i class="vip-icon">&#xe673;</i></button>
                        <br/>
                        <button class="layui-btn layui-btn-radius layui-bg-cyan"><i class="vip-icon">&#xe658;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-gray"><i class="vip-icon">&#xe659;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-orange"><i class="vip-icon">&#xe65e;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-red"><i class="vip-icon">&#xe664;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-black"><i class="vip-icon">&#xe666;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-blue"><i class="vip-icon">&#xe66c;</i></button>
                        <button class="layui-btn layui-btn-radius layui-bg-green"><i class="vip-icon">&#xe673;</i></button>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">按钮大小</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-lg layui-bg-cyan">LG大按钮</button>
                        <button class="layui-btn layui-bg-gray">默认</button>
                        <button class="layui-btn layui-btn-sm layui-bg-orange">SM小按钮</button>
                        <button class="layui-btn layui-btn-xs layui-bg-red">XS按钮</button>
                        <br/>
                        <button class="layui-btn layui-btn-lg layui-bg-cyan">LG大按钮</button>
                        <button class="layui-btn layui-bg-gray">默认</button>
                        <button class="layui-btn layui-btn-sm layui-bg-orange">SM小按钮</button>
                        <button class="layui-btn layui-btn-xs layui-bg-red">XS按钮</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md6">

            <div class="layui-card">
                <div class="layui-card-header">圆形图标按钮(扩展)</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <i class="layui-btn vip-btn-circle layui-bg-cyan vip-icon">&#xe626;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-gray vip-icon">&#xe62c;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-orange vip-icon">&#xe631;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-red vip-icon">&#xe634;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-black vip-icon">&#xe635;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-blue vip-icon">&#xe63b;</i>
                        <i class="layui-btn vip-btn-circle layui-bg-green vip-icon">&#xe639;</i>
                        <br/>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-cyan vip-icon">&#xe626;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-gray vip-icon">&#xe62c;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-orange vip-icon">&#xe631;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-red vip-icon">&#xe634;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-black vip-icon">&#xe635;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-blue vip-icon">&#xe63b;</i>
                        <i class="layui-btn vip-btn-circle vip-btn-lg layui-bg-green vip-icon">&#xe639;</i>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer',function(){

});
</script>
</body>
</html>